<!--
作者：王志鹏
优化物料编码组件的显示（暂定为此版本）
通过点击物料编码在选择编码后
组件显示的内容为（一个卡片包裹着4个文本框）
物料编码（可选）  物料名称（只读）  物料规格（只读）  物料单位（只读）
存入后端的数据为物料的id
在引入时需要导入 components/materialCode/index.vue
推荐组件的宽度为span:"20"
组件只能选择一个物料 如若多选则会提示 （多数据选择暂未制作）-->
<template>
<div>
  <el-row>
  <el-col :span= "11">
    <el-input placeholder="请选择物料编码" :size="size" :disabled="disabled"  :readonly="readonly" style="line-hight:40px" v-model="materiaId" class="input-with-select">
      <el-button slot="append" :disabled="disabled"  :readonly="readonly" @click="showMateralSelect" icon="el-icon-search"></el-button>
    </el-input>
    </el-col>
    </el-row>
  <el-collapse v-model="activeNames" accordion>
    <el-collapse-item title="点击查看物料详情信息" name="1" style="color: #722ED1;">
  <el-row style="margin-top: 10px;">
    <el-col :span= "11">
      <el-form-item label="物料名称" label-width="70px">
         <el-input  placeholder="物料名称" :size="size" :disabled="true"  :readonly="readonly" style="line-hight:40px;" v-model="materiaName" class="input-with-select"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span= "11" style="margin-left: 60px;">
    <el-form-item label="物料型号" label-width="70px">
    <el-input placeholder="物料型号" :size="size" :disabled="true"  :readonly="readonly" style="line-hight:40px" v-model="materiaIdSpec" class="input-with-select"></el-input>
    </el-form-item>
    </el-col>
  </el-row>
  <el-row style="margin-top: 10px;">
    <el-col :span= "11">
    <el-form-item label="物料单位" label-width="70px" >
    <el-input placeholder="物料单位" :size="size" :disabled="true"  :readonly="readonly" style="line-hight:40px" v-model="materiaUnit" class="input-with-select"></el-input>
    </el-form-item>
    </el-col>
    <el-col :span= "11" style="margin-left: 60px;">
    <el-form-item label="ABC分类" label-width="70px" label-position="left">
    <el-input placeholder="ABC分类" :size="size" :disabled="true"  :readonly="readonly" style="line-hight:40px" v-model="sparepartsABCCategory" class="input-with-select"></el-input>
    </el-form-item>
    </el-col>
  </el-row>
  <el-row style="margin-top: 10px;">
    <el-col :span= "11">
      <el-form-item label="提前期" label-width="70px" label-position="left">
        <el-input placeholder="采购提前期" :size="size" :disabled="true"  :readonly="readonly" style="line-hight:40px" v-model="sparepartsAdvanceBuy" class="input-with-select"></el-input>
    </el-form-item>
    </el-col>
    <el-col :span= "11" style="margin-left: 60px;">
      <el-form-item label="电商编码" label-width="70px" label-position="left">
      <!-- <el-tooltip class="item" effect="light" content="电商编码"  placement="left-start"> -->
        <el-input placeholder="电商编码" :size="size" :disabled="true"  :readonly="readonly" style="line-hight:40px" v-model="sparepartsBusinessCode" class="input-with-select"></el-input>
    <!-- </el-tooltip> -->
    </el-form-item>
    </el-col>
  </el-row>
    </el-collapse-item>
    </el-collapse>

    <materal-select ref="materalSelect" @doSubmit="selectMateralToInput" :limit="limit" :selectData="selectData"></materal-select>
</div>
</template>
<script>
import materalSelect from './materialDialog.vue'
export default {
  data () {
    return {
      activeNames: '',
      name: '',
      labelValue: this.value,
      selectData: [],
      materiaId: '',
      materiaIdSpec: '',
      sparepartsAdvanceBuy: '',
      sparepartsBusinessCode: '',
      materiaName: '',
      materiaUnit: '',
      sparepartsABCCategory: ''
    }
  },
  props: {
    limit: Number,
    value: String,
    size: String,
    readonly: {
      type: Boolean,
      default: () => { return false }
    },
    disabled: {
      type: Boolean,
      default: () => { return false }
    }
  },
  components: {
    materalSelect
  },
  created () {

  },
  watch: {
    // 第一个进入的方法
    value: {
      handler (newVal) {
        this.materiaId = ''
        this.materiaName = ''
        this.materiaIdSpec = ''
        this.materiaUnit = ''
        this.sparepartsAdvanceBuy = ''
        this.sparepartsBusinessCode = ''
        this.sparepartsABCCategory = ''
        this.activeNames = ''
        if (newVal) {
          newVal.split(',').forEach((id) => {
            this.$http.get(`/spareparts/material/sparepartsMaterialCodeData/queryById?id=${id}`).then(({data}) => {
              this.materiaId = data.sparepartsMaterialCodeData.sparepartsCoding
              this.materiaName = data.sparepartsMaterialCodeData.sparepartsName
              this.materiaIdSpec = data.sparepartsMaterialCodeData.sparepartsType
              this.materiaUnit = data.sparepartsMaterialCodeData.sparepartsUnit
              this.sparepartsAdvanceBuy = data.sparepartsMaterialCodeData.sparepartsAdvanceBuy
              this.sparepartsBusinessCode = data.sparepartsMaterialCodeData.sparepartsBusinessCode
              this.sparepartsABCCategory = data.sparepartsMaterialCodeData.sparepartsABCCategory
            })
          })
        }
      },
      immediate: true,
      deep: false
    }
  },
  methods: {
    selectMateralToInput (materal) {
      this.selectData = materal
      this.labelValue = materal.map(materal => { return materal.id }).join(',')
      this.materiaId = materal.map(materal => { return materal.sparepartsName }).join(',')
      this.$emit('getValue', this.labelValue, this.materiaId)
    },
    showMateralSelect () {
      this.$refs.materalSelect.init()
    }
  }
}
</script>
<style>
  .el-form-item__content .el-input-group {
      vertical-align: middle;
  }
 .el-tag + .el-tag {
    margin-left: 5px;
    margin-bottom: 5px;
  }
  .el-collapse-item__header {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      height: 48px;
      line-height: 48px;
      background-color: #FFF;
      color: #1890FF !important;
      cursor: pointer;
      border-bottom: 1px solid #EBEEF5;
      font-size: 13px;
      font-weight: 500;
      -webkit-transition: border-bottom-color .3s;
      transition: border-bottom-color .3s;
      outline: 0;
  }
</style>
